<template>
  <el-container class="home">
    <el-aside class="aside" width="350px">
      <user-info height="80px"></user-info>
      <sidebar
        height="calc(100% - 80px)"
        :curSelectedGroupId="curSelectedGroup.id"
        :changeCurGroup="changeCurGroup">
      </sidebar>
    </el-aside>
    <el-main class="main">
      <todo-list :curSelectedGroup="curSelectedGroup"></todo-list>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import UserInfo from '#/userInfo.vue'
import Sidebar from '#/sidebar.vue'
import TodoList from '#/todoList.vue'

const curSelectedGroup = reactive({
  id: -1,
  gname: '',
  icon: ''
})
const changeCurGroup = (id: number, gname: string, icon: string) => {
  curSelectedGroup.id = id
  curSelectedGroup.gname = gname
  curSelectedGroup.icon = icon
}
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  .aside {
    padding: 10px 20px 0 20px;
  }
  .main {
    padding: 0;
    overflow: hidden;
    border-radius: $border-radius * 2 0 0 $border-radius * 2;
  }
}
</style>
